<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="true"
      back-icon-name="arrow-leftward"
      title="价目表"
      :background="{ background: '#fff' }"
      title-color="#000000"
    >
    </u-navbar>
    <view class="c" v-for="item in Object.keys(objs)">
      <view class="row bold">
        <view class="item">{{item}}</view>
        <view class="item">价格（元）</view>
      </view>
      <view class="row" v-for="obj in objs[item]">
        <view class="item">{{obj.name}}</view>
        <view class="item">{{obj.price}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getGoodsAll } from "../../api/system/api";
import moment from 'moment';
export default {
  data() {
    return {
      goods: [],
      objs: {}
    };
  },
  onLoad(option) {
    getGoodsAll().then(res => {
      this.goods = res.data
      let group = res.data.reduce((accumulator, currentItem) => {
        const category = currentItem.category;
        if (!accumulator[category]) {
            accumulator[category] = [];
        }
        accumulator[category].push(currentItem);
        return accumulator;
      }, {});
      this.objs = group;
    })
  },
  methods: {
    
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fff3f3;
  .c {
    .bold {
      font-weight: bold;
    }
    padding: 30rpx;
    .row {
      display: flex;
      margin-top: 14rpx;
      .item {
        flex: 1;
        text-align: center;
      }
    }
  }
}

</style>
